<template>
  <div>
    <Card>
      <p slot="title" style="height: 36px">
        <Row>
          <Col>
            <Button @click="toBack" size="large" type="ghost" icon="ios-skipbackward"></Button>
            <DatePicker v-model="month" transfer type="month" placeholder="请选择月份" size="large" style="width: 200px"></DatePicker>
            <Button @click="toNext" size="large" type="ghost" icon="ios-skipforward"></Button>
          </Col>
        </Row>
      </p>
      <Row>
        <Col :span="3">
          <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
            <p align="right">周一</p>
          </Card>
        </Col>
        <Col :span="3">
          <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
            <p align="right">周二</p>
          </Card>
        </Col>
        <Col :span="3">
          <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
            <p align="right">周三</p>
          </Card>
        </Col>
        <Col :span="3">
          <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
            <p align="right">周四</p>
          </Card>
        </Col>
        <Col :span="3">
          <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
            <p align="right">周五</p>
          </Card>
        </Col>
        <Col :span="3">
          <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
            <p align="right">周六</p>
          </Card>
        </Col>
        <Col :span="3">
          <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
            <p align="right">周日</p>
          </Card>
        </Col>
        </Row>
        <Row v-for="(items,index) in data" :key="index">
        <Col :span="3" v-for="(item,index) in items" :key="index">
        <Card>
        <div v-if="item.isDay === 0" @click="add(item)" style="padding: 5px" v-on:mouseover="enterClass($event)" v-on:mouseout="outClass($event)" v-bind:class="[activeClass1]" align="right">
        <label v-if="item.day !== -1">{{item.day}}</label><br><br>
        <p align="center">{{item.userName}}</p>
        </div>
        <div v-if="item.isDay === 1" @click="add(item)" style="padding: 5px" v-bind:class="[activeClass2]" align="right">
        <label v-if="item.day !== -1">{{item.day}}</label><br><br>
        <p align="center">{{item.userName}}</p>
        </div>
        </Card>
        </Col>
      </Row>
    </Card>
    <Modal v-model="showMainClass" @on-ok="addMainClass" :closable='false' :mask-closable=true :width="400">
      <p slot="header">主班设置</p>
      <Row>
        <Col :span="20" offset="2">
          <Select v-model="formData.userId" style="width:100%">
            <Option v-for="item in users" :value="item.id" :key="item.id">{{ item.username }}</Option>
          </Select>
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<style>
.active1{
height: 120px;
background-color: #fff;
}
.active2{
height: 120px;
background-color: #FFC;
}
</style>
<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        components: {
            iviewTable,
            iviewPage
        },
        data () {
            return {
                baseURL: '/user/business/mainClass',
                month: '',
                operat: '0',
                data: [],
                users: [],
                activeClass1: 'active1',
                activeClass2: 'active2',
                showMainClass: false,
                formData: {
                    id: '',
                    userId: '',
                    userName: '',
                    dutyDateStr: '',
                }
            }
        },
        methods: {
            enterClass (ev) {
                if (ev.target.localName === 'div') {
                    ev.target.style.backgroundColor = '#FFC'// #C0DDF2
                }
            },
            outClass (ev) {
                if (ev.target.localName === 'div') {
                    ev.target.style.backgroundColor = '#fff'
                }
            },
            refresh () {
                let url = this.baseURL + '/getCalendar/' + this.month
                this.$ajax.get(url).then(response => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.data = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            add (item) {
                let d1 = parseInt(this.$moment().format('YYYYMMDD'))
                let d2 = parseInt(this.$moment(item.dutyDate).format('YYYYMMDD'))
                if (d1 > d2) {
                    this.$bus.alert('warning', '请设置大于当前时间的数据')
                    return
                }
                if (item.day !== -1) {
                    this.$ajax.get('user/findAll').then(response => {
                        let {code, data, msg} = response.data
                        if (code === 0) {
                            this.users = data
                            this.formData = item
                            this.showMainClass = true
                        } else {
                            this.$bus.alert('error', msg)
                        }
                    })
                }
            },
            addMainClass () {
                let url = this.baseURL + '/saveOrUpdate'
                this.$ajax.post(url, this.formData).then(response => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', '设置成功')
                        this.refresh()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            toBack () {
                this.month = this.$moment(this.month).subtract(1, "months").format("YYYY-MM")
            },
            toNext () {
                this.month = this.$moment(this.month).add(1, "months").format("YYYY-MM")
            },
            changeSelect (selection) {
                this.selectRows = selection
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            init () {
                this.month = this.$moment().format('YYYY-MM')
            }
        },
        mounted () {
            this.init()
        },
        watch: {
            '$route' (to) {
                if (to.path === '/main') {
                    this.init()
                }
            },
            month: function (val, oldVal) {
                this.month = this.$moment(val).format("YYYY-MM")
                this.refresh()
            }
        }
    }
</script>

<style>

</style>
